<template>
  <!--工作台表格工序进度条组件-->
  <div class="workstage_proccess" v-if="dialogVisible">
    <div class="title">
      <div class="status_item">
        <p class="ToBeStarted">待开工</p>
        <p class="Started">已开工</p>
        <p class="NotArrive">未到达</p>
        <p class="Finished">已完工</p>
      </div>
      <div class="turnover">周转码：{{turnoverNumber}}</div>
      <div class="close">
        <i @click="close" class="iconfont icon-tab_close_n"></i>
      </div>
    </div>
    <div class="table_container">
      <el-table
        width="1680"
        :show-header="false"
        class="work_stage_process_table"
        :data="listData">
        <el-table-column
          :key="index"
          v-for="(column, index) in workstagesCols"
          :prop="column.prop"
          show-overflow-tooltip
          className="fix_bottom"
          min-width="210"
          align="center">
          <template slot-scope="scope">
            <div :class="getWorkstageClass(scope.row, column)" className="row_item">
              {{getWorkstageSortCell(scope.row, column)}}
              <!--{{index+1}}-->
            </div>
            <div :class="getWorkstageIdClass(scope.row, column)" className="row_item">
              {{getWorkstageCell(scope.row, column)}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkstageProccess',
  data() {
    return {
      dialogVisible: false, //是否显示
      isLoading: false,
      listData: [],
      workstagesCols: [],
      turnoverNumber: ''
    }
  },
  methods: {
    openDialog(row) {
      this.dialogVisible = false
      this.isLoading = true
      this.turnoverNumber = row[0].turnoverNumber
      let commitObj = {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/getworkstageproccessstatus',
        module: 'workShopInspection',
        data: {
          turnoverNumber: this.turnoverNumber
        },
        state: 'workstageProccessList'
      }
      this.$store.dispatch('saveData', commitObj).then(res => {
        this.listData = this.buildArr(res)
        this.workstagesCols = this.buildWorkstageColumns(res)
        this.isLoading = false
      }).finally(() => {
        this.dialogVisible = true
      })
    },
    // 重新组建返回数据
    buildArr(res) {
      let lastObj = {}
      res.map((item, index) => {
        lastObj['workstage' + index] = item
      })
      return [lastObj]
    },
    // 表格工序列
    buildWorkstageColumns(res) {
      if (res.length === 0) return {prop: 'workstage'}
      return res.map((item, index) => {
        return {prop: 'workstage' + index}
      })
    },
    // 获取工序名称
    getWorkstageCell(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        return row[column.prop].workstageName
      }
    },
    // 获取工序名称
    getWorkstageSortCell(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        return row[column.prop].sort
      }
    },
    // 根据工序状态的value值不同的class
    getWorkstageClass(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        return row[column.prop].workstageProcessStatusValue
      }
    },
    // 根据工序状态的Id值不同的class
    getWorkstageIdClass(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        return row[column.prop].workstageProcessStatusId
      }
    },
    handleClick() {
      this.isShow = true
    },
    close() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less">
  .workstage_proccess {
    position: fixed;
    bottom: 0;
    z-index: 99;
    width: 1663px;
    height: 117px;
    margin: 0 0 0 20px;
    background-color: rgba(29, 38, 55, .85);
    animation: transTop 400ms ease-in-out;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px 15px 0;

      .status_item {
        padding: 0 20px;

        p {
          display: inline-block;
          font-size: 12px;
          border-radius: 2px;
          width: 48px;
          height: 22px;
          line-height: 22px;
          text-align: center;
        }
      }

      .turnover {
        color: #fff;
      }

      .icon-tab_close_n {
        color: #bbb;
      }

      .close {
        cursor: pointer;
      }
    }

    .table_container {
      .el-table {
        background-color: unset;

        &.el-table--enable-row-hover .el-table__body tr {
          & > td {
            opacity: 0.85;
            color: #000;
            background-color: #1d2637;
            border-bottom: none;
          }
        }
      }

      .fix_bottom {
        .cell {
          height: 80px;
          line-height: 20px;
          padding: 0;
          background-color: #1d2637;

          div {
            margin-bottom: 10px;
          }

          .row_item {
            height: 20px;
            line-height: 20px;
            margin-top: 10px;
          }
        }
      }
    }

    @keyframes transTop {
      from {
        transform: translateY(133px);
      }

      to {
        transform: translateY(0);
      }
    }
    /**工序进度状态Value值*/
    // 未到达
    .ID_WPST_4_NotArrive {
      color: #ffc7c7;
    }

    // 待开工
    .ID_WPST_2_ToBeStarted {
      color: #99e1ff;
    }

    // 已开工
    .ID_WPST_1_Started {
      color: #ffff99;
    }

    // 已完工
    .ID_WPST_3_Finished {
      color: #a0e7b1;
    }

    /**工序进度状态Id值*/
    // 未到达
    .NotArrive {
      background: #ffc7c7;
    }

    // 待开工
    .ToBeStarted {
      background-color: #99e1ff;
    }

    // 已开工
    .Started {
      background-color: #ffff99;
    }

    // 已完工
    .Finished {
      background-color: #a0e7b1;
    }
  }
</style>
